<template>
  <div class="Operation">
      <div>
          <p>采购渠道筛选</p>
          <select  v-model="channel">
              <option v-for="(item,index) in sel" :key="item+index" :value="item.name">{{item.name}}</option>
          </select>
      </div>
      <div>
          <p>物品名称</p>
          <input type="text" v-model="from.name">
      </div>
      <div>
          <p>{{channel}}购最高价</p>
          <input v-model="from.firstTopPrice" />
          ------
          <input  v-model="from.lastTopPrice"/>
      </div>
      <div>
          <p>{{channel}}现有价格</p>
          <input v-model="from.firstLowPrice"/>-----
          <input v-model="from.lastLowPrice"/>
      </div>
      <div>
          <p>商品网站售价</p>
          <input v-model="from.firstPrice"/>-----
          <input v-model="from.lastPrice"/>
      </div>
      <div>
          <p>游戏类型</p>
            <select  v-model="name">
                <option>不限</option>
                <option v-for="(item,index) in sell" :key="item+index" :value="item.name">{{item.name}}</option>
            </select> 
      </div>
      <el-button  @click="search">搜索</el-button>
      <el-tabs @tab-click="tabChange" v-model="activeName">
        <el-table :data="tableData.list" border style="width: 100%">
          <el-table-column prop="id" label="物品ID" width="180"></el-table-column>
          <el-table-column prop="type" label="物品类型" width="180"></el-table-column>
          <el-table-column prop="name" label="物品名称" width="180"></el-table-column>
          <el-table-column prop="img" label="图片预览" width="180">
              <template slot-scope="scope">
                    <img :src="scope.row.img" style="height:58px">
                </template>
          </el-table-column>
          <el-table-column prop="quality" label="品质" width="180"></el-table-column>
          <el-table-column prop="price" label="网站售价" width="180"></el-table-column>
          <div v-if="types == '俄罗斯'">
               <el-table-column prop="priceRusTopRussia" label="俄罗斯最高进货价" width="180"></el-table-column>
                <el-table-column prop="priceLowRussia" label="俄罗斯当前最低价" width="180"></el-table-column>
          </div>
          <div v-if="types == 'IGXE'">
               <el-table-column prop="priceRusTopIgxe" label="IGXE最高进货价" width="180"></el-table-column>
                <el-table-column prop="priceLowIgxe" label="IGXE当前最低价" width="180"></el-table-column>
          </div>
          <div v-if="types == 'c5'">
                <el-table-column prop="priceRusTopC5" label="C5最高进货价" width="180"></el-table-column>
                <el-table-column prop="priceLowC5" label="C5当前最低价" width="180"></el-table-column>
           </div>
           <div v-if="types == '暂无'">
                 <el-table-column prop="priceRusTopRussia" label="俄罗斯最高进货价" width="180"></el-table-column>
                <el-table-column prop="priceLowRussia" label="俄罗斯当前最低价" width="180"></el-table-column>
                <el-table-column prop="priceRusTopIgxe" label="IGXE最高进货价" width="180"></el-table-column>
                <el-table-column prop="priceLowIgxe" label="IGXE当前最低价" width="180"></el-table-column>
                <el-table-column prop="priceRusTopC5" label="C5最高进货价" width="180"></el-table-column>
                <el-table-column prop="priceLowC5" label="C5当前最低价" width="180"></el-table-column>
           </div>
           
          <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.state== 1">
                        <el-button  @click="handleClick(scope)" type="text" size="small" >编辑</el-button>
                         <el-button type="text" size="small" @click="detil(scope.row)" >停用</el-button>
                    </div>
                    <div v-else>
                        <el-button style="color:red;" type="text"  size="small" >已停用</el-button>
                    </div>
                </template>
                </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.pages*10"
             @current-change="currentChange"
            >
        </el-pagination>
      <el-tab-pane label="全部" name="3"></el-tab-pane>
      <el-tab-pane label="启用" name="1"></el-tab-pane>
      <el-tab-pane label="停用" name="0"></el-tab-pane>
    </el-tabs>
    <div class="Modification" v-if="show">
        <div>
        <form ref="form">
            <input name="channel" v-model="channe2" type="hidden">
           <p @click="handleClickto" class="pa">x</p>
           <div class="div1">
                <span>物品名称</span>
                 <input name="name" v-model="from1.name" type="text">
                 <input name="img" v-model="from1.img"  type="hidden">
           </div>
        <div class="img">
              <span>图片</span>
                <el-upload
                class="avatar-uploader"
                v-bind:action="imgUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                name="file">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
        </div>
        <div class="div1">
            <span>网站价格</span>
            <input name="price" v-model="from1.price" >
        </div>
        <input type="hidden" name="id" v-model="from1.id">
            <div class="div">
                <span>{{channel}}购买系数</span>
                <input v-if="channel=='俄罗斯'" name="percent" v-model="from1.buyPercentRussia " type="text">
                <input v-if="channel=='IGXE'" name="percent" v-model="from1.buyPercentIgxe " type="text">
                <input v-if="channel=='c5'" name="percent" v-model="from1.buyPercentC5 " type="text">
            </div>
         <el-button type="success" @click="updata">修改</el-button>
        </form>
        </div>

    </div>
  </div>
</template>
<script>
import $axios from '../../../utils/publicApi'
import BasicsApi from '../../../api/Basicpath/index'
import { Loading } from 'element-ui';
import axios from 'axios'
export default {
  data() {
    return {
      imgUpload:`${BasicsApi}/gamemall/upload/image`,
      imageUrl:'',
      activeName:'3',
      dialogImageUrl: '',
      dialogVisible: false,
      show:false,
      tableData: '',
      channel:'',
      name:'不限',
      from:{
          channel:1,
          name:'',
          firstTopPrice:'',
          lastTopPrice:'',
          firstLowPrice:'',
          lastLowPrice:'',
          firstPrice:'',
          lastPrice:'',
          type:1,
          state:'',
          currentPage:1,
          pageSize:5
      },
      from1:{
          name:'',
          price:'',
          id:'',
          channel:1,
          img:''
      },
      from2:{
          channel:1,
          name:'',
          firstTopPrice:'',
          lastTopPrice:'',
          firstLowPrice:'',
          lastLowPrice:'',
          firstPrice:'',
          lastPrice:'',
          type:'',
          state:'',
          currentPage:1,
          pageSize:5
      },
      sel:'',
      sell:'',
      channe2:1,
      types:'暂无',
      list:'',
      list1:'',
      img:''
    };
  },
  async created(){
    var list =await $axios.getAll('/gamemall/droplist/type')
    this.list= list.obj
    var list1=await  $axios.getAll('/gamemall/droplist/quality?id=1')
    this.list1 = list1.obj
    var obj =await $axios.getAll('/gamemall/procurement/select2Procurement',{currentPage:1,pageSize:5,channel:1})
    this.changes(obj.obj)
      
      $axios.postAll('/gamemall/deliveryPlatform/getPlatformList',{state:1}).then((res)=>{
          if(res.code == 200){
              this.sel = res.data
              this.channel = res.data[0].name
          }
      })
     $axios.getAll('/gamemall/droplist/type').then((res)=>{
          this.sell = res.obj
      })
  },
  methods:{
      changes(parms,options){
        parms.list.map((item)=>{
            this.list.map((item1)=>{
                if(item.type == item1.id){
                    item.type = item1.name
                }
            })
            this.list1.map((item2)=>{
                if(item.quality == item2.id){
                    item.quality = item2.name
                }
            })
        })
        this.tableData = parms
        let loadingInstance = Loading.service(options);
          this.$nextTick(() => { 
            loadingInstance.close();
          });
      },
      updata(){
          var form = this.$refs.form
            axios({
                url:`${BasicsApi}/gamemall/procurement/edit`,
                data:new FormData(form),
                method:'post',
                headers:{
                    'Content-Type':'multipart/form-data',
                    'token':JSON.parse(localStorage.getItem('user')).sessionId
                }
            }).then((res)=>{
                if(res.data.code == 200){
                         $axios.getAll('/gamemall/procurement/select2Procurement',this.from2).then((res)=>{
                                if(res.code == 200){
                                    this.show = false
                                    this.changes(res.obj)
                                    this.$message({
                                           showClose: true,
                                           message: '修改成功',
                                           type: 'success'
                                        });
                                }else{
                                    this.$message({
                                           showClose: true,
                                           message: '修改失败',
                                           type: 'error'
                                    });
                                }
                            })
                }
            })
      },
      tabChange(){
          var options = false
          Loading.service(options);
          this.Numchange()
          if(this.activeName == '3'){
            delete this.from.state
            delete this.from2.state
          }else{
             this.from.state = this.activeName
             this.from2.state = this.activeName
          }
          if(this.from2.state){
               this.from2.state = this.from2.state * 1
          }
          $axios.getAll('/gamemall/procurement/select2Procurement',this.from2).then((res)=>{
            if(res.code == 200){
                this.changes(res.obj,options)
            }
        })
      },
      change(){
          this.sel.map((res)=>{
              if(res.name == this.channel){
                  this.from.channel = res.id
              }
          })
          this.sell.map((res)=>{
              if(res.name == this.name){
                  this.from.type = res.id
              }else if(this.name =='不限'){
                  this.from.type = ''
              }
          })
      },
      handleRemove(file, fileList) {
      },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.from1.img = JSON.parse(JSON.stringify(res.data))
            },
      handleClick(e){
          this.sel.map((item)=>{
              if(item.name == this.channel){
                  this.channe2 = item.id
              }
          })
          this.from1 =JSON.parse(JSON.stringify(e.row))

          this.show = true
          this.imageUrl = e.row.img
      },
      handleClickto(){
          this.show = false
      },
      detil(e){
          $axios.postAll(`/gamemall/procurement/edit?state=0&id=${e.id}`,).then((res)=>{
              if(res.code == 200){
                  e.state = 0
                  this.$message({
                    showClose: true,
                    message: '已停用',
                    type: 'success'
                    });
              }else{
                  this.$message({
                    showClose: true,
                    message: '停用失败',
                    type: 'error'
                    });
              }
          })
      },
      currentChange(e){
           var options = false
          Loading.service(options);
        this.from.currentPage = e
        this.from2.currentPage = e
        $axios.getAll('/gamemall/procurement/select2Procurement',this.from2).then((res)=>{
            if(res.code == 200){
                this.changes(res.obj,Option)
            }
        })
      },
    search(){
         var options = false
         Loading.service(options);
        this.types = this.channel
        this.change()
        this.from2 = JSON.parse(JSON.stringify(this.from))
        $axios.getAll('/gamemall/procurement/select2Procurement',this.from).then((res)=>{
            if(res.code == 200){
                this.changes(res.obj,options)
            }
        })
    },
    Numchange(){
        this.from.firstTopPrice =this.from.firstTopPrice.length==0?this.from.firstTopPrice:parseFloat(this.from.firstTopPrice)
        this.from.lastTopPrice =this.from.lastTopPrice.length==0?this.from.lastTopPrice:parseFloat(this.from.lastTopPrice)
        this.from.firstLowPrice =this.from.firstLowPrice.length==0?this.from.firstLowPrice:parseFloat(this.from.firstLowPrice)
        this.from.lastLowPrice = this.from.lastLowPrice.length==0?this.from.lastLowPrice:parseFloat(this.from.lastLowPrice)
        this.from.firstPrice = this.from.firstPrice.length==0?this.from.firstPrice:parseFloat(this.from.firstPrice)
        this.from.lastPrice =this.from.lastPrice.length==0?this.from.lastPrice:parseFloat(this.from.lastPrice)
    }
  }
};
</script>

<style lang="less">
@import '../../../style/mixin.less';
.Operation {
    .el-table__row{
        height: 90px;
    }
    .el-tabs{
        display: block;
        margin-top: 50px;
    }
    >.el-button{
       margin-left: 70px;
    }
    text-align: left;
    input{
        border: 1px solid #C0C4CC;
        border-radius: 5px;
        background: white;
        .w(100);
        height: 30px;
        padding: 5px;
    }
    >div{
        display: inline-block;
        margin: 0 15px;
        text-align: center;
        p{
            margin: 20px 0;
        }
    }
    >div:nth-of-type(3),>div:nth-of-type(4),>div:nth-of-type(5){
        input{
            .w(50)
        }
    }
    select{
        .w(150);
        height: 30px;
    }
    .img>div{
        display: inline-block;
        line-height: 50px;
        .el-upload{
            width: 100px;
            height: 100px;
            position: relative;
            left: 140px;
            .el-icon-plus{
                position: absolute;
                left: 25%;
                top: 25%;
            }
        }

    }
    .Modification{
        >div{
            padding: 50px;
        }
        .pa{
            position: absolute;
            top: 5px;
            right: 20px;
            cursor: pointer;
        }
        .div{
            height: 100px;
            input{
                margin-left: 20px;
            }
        }
        .div1{
            height: 100px;
            input{
                margin-left: 60px;
            }
        }
        .img{
            text-align: left;
            line-height: 100px;
            position: relative;
            img{
                width: 200px;
                height: 100px;
            }
            span{
                position: absolute;
                top: 0;
            }
        }
        margin: 0;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
        z-index: 999;
        input{
            .w(300)
        }
        >div{
            padding-bottom: 30px;
            >p{
                color: black;
                position: absolute;
                right: 20px;
                top: -10px;
                cursor: pointer;
            }
            background: rgba(255,255,255,.9);
            position: relative;
            display: inline-block;
            margin-top: 14%;
            >div{
            text-align: left;
            margin: 50px;
            span{
               .w(160);
               display: inline-block;
            }
        }
        
        }
        
    }
}
</style>
